<template>
  <div>
    <Form ref="form" :label-width="90" :model="importParam" inline label-colon>
      <FormItem :label-width="0">
        <RadioGroup v-model="importParam.profitRatio" type="button" button-style="solid">
          <Radio v-for="(ratio, index) in profitRatios" :key="index" :label="ratio">{{ratio+"%"}}</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="利润比" prop="profitRatio" required :show-message="false" class="one-line">
        <InputNumber v-model="importParam.profitRatio" :min="0" :active-change="false"
                     :formatter="formatProfitRatio" :parser="parseProfitRatio" class="input-common"></InputNumber>
        <div style="color: #888888;font-size: 12px">不得低于 100%</div>
      </FormItem>

      <Tabs value="type_tree">
        <TabPane name="type_tree" label="选择分类（方式一）">
          <FormItem label="产品分类" prop="categories" required :show-message="false">
            <CategoryTree v-model="importParam.categories"></CategoryTree>
          </FormItem>
        </TabPane>
        <TabPane name="type_menu" label="选择分类（方式二）">
          <CategoryTabs v-model="importParam.categories"></CategoryTabs>
        </TabPane>
      </Tabs>
    </Form>
  </div>
</template>

<script>
import importData from "../js/productImport/importData";
import CategoryTabs from "../../widgets/categorySelector/CategoryTabs";
import CategoryTree from "../../widgets/categorySelector/CategoryTree";

export default {
  name: "ImportDialog",
  components: {CategoryTabs, CategoryTree},
  props: {
    importParam: {type: Object, required: true},
  },
  data() {
    return {
      profitRatios: importData.tData.profitRatios,
    }
  },
  methods: {
    formatProfitRatio(value) {
      return value + "%";
    },
    parseProfitRatio(value) {
      return value.replace("%", "");
    },
  },
  watch: {
    "importParam.categories": {
      handler() {
        if(this.importParam.categories.length == 0) {
          this.$refs.form.validate();
        }
      },
      deep: true,
    }
  }
}
</script>

<style scoped lang="less">
.one-line {
  width: 100%;
}
</style>
